import {
  reactive,
  defineComponent,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  ref
} from "vue";
import HelloWorld from "@/components/HelloWorld";
import {getDemo} from '../utils'

interface DataProps {
	msgInit:any;
}

export default defineComponent({
	name: 'About',
    setup(props:any) {
        const data: DataProps = {msgInit: '初始化'}
        
        onMounted(() => {
          console.log("3-组件挂载到页面之后执行-----onMounted()",data);
          getDemo().then(res => {  // 我要开始请求数据了
            console.log('res',res)
          })
        });

        // const refData = toRefs(data);
        return () => {
          return (
            <>
			    <div class="home">
					<a-avatar alt="Vue logo" src={"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"} />
					<div>{data.msgInit}</div>
					
					<a-button >关于</a-button>
					
					<HelloWorld msg={data.msgInit} ref='comRef' />
				</div>
            </>
            )
        }
    }
});

